<template>
	<div class="add-record">
		<el-drawer width="40%" v-model="drawer" title="沟通记录" :direction="direction">
			<div class="content">
				<div class="remark-inp">
					<el-input v-model="stateData.communicationDetails" type="textarea" placeholder="请输入沟通内容" maxlength="220"
						show-word-limit />
				</div>
				<div class="select-inp">
					<div class="title">
						沟通形式
					</div>
					<div class="inp">
						<el-select v-model="stateData.form" placeholder="请选择" size="large">
							<el-option v-for="item in communicationFormList" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</div>
				</div>
				<div class="select-inp">
					<div class="title">
						分配美妆顾问
					</div>
					<div class="inp">
						<el-input placeholder="请选择" v-model="enterpriseName" clearable @click.stop="clickInp"></el-input>
					</div>
				</div>
				<div class="select-inp">
					<div class="title">
						意向程度
					</div>
					<div class="inp">
						<el-select v-model="stateData.intentionExtent" placeholder="请选择" size="large">
							<el-option v-for="item in extentOption" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</div>
				</div>
				<div class="select-inp">
					<div class="title">
						意向课程
					</div>
					<div class="inp">
						<el-input placeholder="请输入" v-model="stateData.intentionSubject"></el-input>
					</div>
				</div>
				<div class="picker-inp">
					<div class="title">
						邀约到店
					</div>
					<div class="inp">
						<el-date-picker format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" v-model="stateData.inviteTime"
							type="datetime" placeholder="请选择" />
					</div>
				</div>
				<div class="picker-inp">
					<div class="title">
						预约试听
					</div>
					<div class="inp">
						<el-date-picker format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
							v-model="stateData.listeningTest" type="datetime" placeholder="请选择" />
					</div>
				</div>
				<div class="picker-inp">
					<div class="title">
						下次联系
					</div>
					<div class="inp">
						<el-date-picker format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
							v-model="stateData.relationTime" type="datetime" placeholder="请选择" />
					</div>
				</div>
				<div class="select-inp">
					<div class="title">
						无效线索
					</div>
					<div class="inp">
						<el-select v-model="stateData.nullityClue" placeholder="请选择" size="large">
							<el-option v-for="item in clueTypeOption" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</div>
				</div>
				<div class="footer-btn">
					<el-button @click="drawer = false">取消</el-button>
					<el-button type="primary" @click="saveAdd">保存沟通记录</el-button>
				</div>
			</div>
		</el-drawer>

		<!-- 分配美妆顾问 -->
		<SelectStaff ref="selectRef" :staffType=20 @confirm="sureStaff"/>
	</div>
</template>

<script setup>
import { ref, defineProps, getCurrentInstance, defineEmits } from "vue";
import SelectStaff from "@/components/SelectStaff/index.vue";
import { ElNotification, ElMessage } from 'element-plus'
const emit = defineEmits(['setRecord'])
const props = defineProps(['visitorId'])

const { proxy } = getCurrentInstance()

const schollOption = ref([])

// 获取部门列表
const getDeptList = async () => {
	const { code, data } = await proxy.$API.dept.list.get();
	if (code == 200) {
		schollOption.value = data
	}
}

const drawer = ref(false)

const direction = ref('rtl')

const enterpriseName = ref("")

const selectRef = ref(null)
const clickInp = () => {
	const title = "美妆顾问"
	selectRef.value.openDialog(title)
}

const sureStaff = (selectList) => {
	enterpriseName.value = selectList.name
	stateData.value.enterpriseId = selectList.id
}

const stateData = ref({
	enterpriseId: null,    //美妆顾问
	communicationDetails: null,    //沟通内容
	form: null,   //沟通形式
	inviteTime: null,   //邀约到店
	listeningTest: null,    //预约试听
	relationTime: null,    //下次联系
	intentionExtent: null,   //意向程度
	intentionSubject: null,  //意向课程
	nullityClue: "否",  //无效线索
})
const communicationFormList = [
	{ value: "短信", label: "短信" },
	{ value: "电话", label: "电话" },
	{ value: "QQ", label: "QQ" },
	{ value: "微信", label: "微信" }
]

const extentOption = [
	{ value: "B", label: "B" },
	{ value: "D", label: "D" },
	{ value: "A", label: "A" },
	{ value: "C", label: "C" }
]

const clueTypeOption = [
	{ value: "否", label: "否" },
	{ value: "是", label: "是" }
]

const tipsFun = (messageInfo) => {
	ElNotification({
		title: '提示',
		message: messageInfo,
		type: 'warning',
		duration: 1000,
	})
}

// 验证必填
const verifySubmit = () => {
	let isOk = true
	let messageInfo = ""
	if (!stateData.value.communicationDetails) {
		isOk = false
		messageInfo = "请输入沟通内容"
		tipsFun(messageInfo)
	}
	return isOk;
}

// 处理提交参数
const handleSubmit = () => {
	if (!enterpriseName.value) {
		stateData.value.enterpriseId = null
	}
}

// 保存
const saveAdd = () => {
	if (!verifySubmit()) { return }
	handleSubmit()
	console.log(props.visitorId);
	stateData.value.visitorId = parseInt(props.visitorId)
	proxy.$API.clue.setCommunication.get(stateData.value).then(res => {
		if (res.code == 200) {
			ElMessage({
				message: res.msg,
				type: "success",
			});
		}else{
			ElMessage({
				message: res.message,
				type: "warning",
			});
		}

		drawer.value = false
		emit('setRecord')
	})
}

const initList = () => {
	stateData.value = {
		enterpriseId: null,
		communicationDetails: null,
		form: null,
		inviteTime: null,
		listeningTest: null,
		relationTime: null,
		intentionExtent: null,
		intentionSubject: null,
		nullityClue: "否",
	}
	enterpriseName.value = null
}

// 打开抽屉
const openDrawer = () => {
	initList()
	getDeptList()
	drawer.value = true
}
defineExpose({
	openDrawer
})
</script>

<style lang="scss" scoped>
.add-record {
	::v-deep .el-drawer {
		width: 35% !important;
	}
}

.content {
	padding: 15px;

	&>div {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.title {
		width: 100px;
		height: 32px;
		line-height: 32px;
		color: #606266;
		font-size: 14px;
		text-align: end;
		padding-right: 15px;
	}

	.inp {
		flex: 1;

		.el-select,
		.el-input__wrapper {
			width: 100%;
		}
	}

	.inp_b {
		display: flex;
	}

	.remark-inp {
		::v-deep .el-textarea__inner {
			min-height: 135px !important;
		}
	}

	.footer-btn {
		display: flex;
		justify-content: end;
		padding-top: 30px;
		align-items: center;
	}
}
</style>